import React, {useEffect, useState} from 'react';
import {View,StyleSheet,Button,Text} from 'react-native';
import {Row, Rows, Table as TableView} from 'react-native-table-component';
import {useNavigation, useRoute} from '@react-navigation/native';
import {useHeaderHeight} from '@react-navigation/elements';


const Table = ()=>{

    const [showWeb,setShowWeb] = useState(false)
    const {params} = useRoute()
    const headerHeight = useHeaderHeight()
    const navigation = useNavigation()
    const {data} = params

    useEffect(()=>{
        navigation.setOptions({
            headerTitle:params.title
        })
    },[])


    return (
        <View style={[styles.container,{paddingTop:headerHeight}]}>
            <TableView borderStyle={{borderWidth: 1, borderColor: '#f0f'}}>
                {
                    data.map((row,index)=>{

                        if(row[row.length-1].trim() === ''){
                            //去掉尾部的空行
                            row.pop()
                        }

                        return (
                            <Row key={index} data={row}  />

                        )
                    })
                }
            </TableView>
        </View>
    )
}

export default Table

const styles = StyleSheet.create({
    container:{
        flex:1, backgroundColor:'#fff',padding:20
    }
})
